<app-header-outside />
<main class="wsl-min-h-screen-1 grid">
  <div
    class="mx-auto w-full max-w-screen-sm space-y-4 self-center rounded-md bg-white p-8 shadow-md dark:bg-gray-800">
    <h2
      class="text-center text-2xl font-semibold text-black dark:text-gray-300">
      Touca is ready!
    </h2>
    <p class="text-center text-sm text-black dark:text-gray-300">
      Take a moment to configure your self-hosted instance.
    </p>
    <hr class="border-2 border-gray-100 dark:border-gray-700" />
    <div class="py-1" *ngIf="alert">
      <app-alert [alert]="alert" />
    </div>
    <ng-container *ngIf="tabType === 'userInfo'">
      <app-account-install-name (switchTab)="switchTab($event)" />
    </ng-container>
    <ng-container *ngIf="tabType === 'userAccount'">
      <app-account-install-account (switchTab)="switchTab($event)" />
    </ng-container>
    <ng-container *ngIf="tabType === 'telemetry'">
      <app-account-install-telemetry (switchTab)="switchTab($event)" />
    </ng-container>
    <ng-container *ngIf="tabType === 'thanks'">
      <app-account-install-thanks />
    </ng-container>
  </div>
</main>
<app-help />
